<template>
  <div class="home-nav-swipe">
    <div class="home-nav-swipe-logo">
      <img
        src="https://img.alicdn.com/imgextra/i3/2053469401/O1CN011wdOkj2JJhy7TkPFo_!!2053469401.png"
        alt="图片加载失败"
      />
    </div>
    <div>
      <van-swipe
        style="height: 0.4rem"
        vertical
        :autoplay="4000"
        :duration="1500"
        :show-indicators="false"
      >
        <van-swipe-item v-for="(item, index) in navSwipeList" :key="index">
          <span class="home-nav-tag"> {{ item.tag }} </span>
          <span class="home-nav-name"> {{ item.name }} </span>
          <van-icon name="arrow" size="14" />
        </van-swipe-item>
      </van-swipe>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, computed, onMounted } from "vue";
import { useStore } from "vuex";
export default defineComponent({
  setup() {
    const store = useStore();
    const navSwipeList = computed(() => store.state.home.navSwipeList);
    onMounted(() =>
      store.dispatch({
        type: "home/getNavSwipeList",
        data: {
          entityId: 4,
          modelId: 28991,
          proModelId: 13,
          source: 3,
          version: "v1",
          tuserId: 771131,
          isWechat: 0,
        },
      })
    );
    return {
      navSwipeList,
    };
  },
});
</script>

<style lang="stylus" scoped>
.home-nav-swipe
    display flex
    height .4rem
    justify-content space-around
    align-items center
    background white
    .home-nav-swipe-logo
        width .59rem
        height .14rem
        display flex
        >img
            width 100%
            height 100%
    .van-swipe-item
        display flex
        font-size .12rem
        align-items center
        flex-grow 1
        .home-nav-tag
            border-radius .07rem
            color white
            line-height .14rem
            height .14rem
            padding 0 .05rem
            background rgb(255, 124, 13)
            margin-right .1rem
        .home-nav-name
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            width 1.8rem
            flex 1
</style>
